<!-- 两市交易总量 -->
<template>
  <div class="box">
    <div class="border">
      <div class="head">
        <div class="type clear">
          <span
            class="item fl"
            :class="{ cur: market == 'all' }"
            @click="market = 'all'"
            >两市</span
          >
          <span
            class="item fl"
            :class="{ cur: market == 'sh' }"
            @click="market = 'sh'"
            >沪市</span
          >
          <span
            class="item fl"
            :class="{ cur: market == 'sz' }"
            @click="market = 'sz'"
            >深市</span
          >
          <span
            class="item fl"
            :class="{ cur: market == 'kcb' }"
            @click="market = 'kcb'"
            >科创板<i class="icon"></i
          ></span>
        </div>
        <span class="title">交易明细({{ endDate }})</span>
      </div>
      <div class="tag clear">
        <span class="label fl">数据区间</span>
        <span
          class="item fl"
          :class="{ cur: type == 'one' }"
          @click="getStock('one')"
          >1日</span
        >
        <span
          class="item fl"
          :class="{ cur: type == 'threed' }"
          @click="getStock('threed')"
          >3日</span
        >
        <span
          class="item fl"
          :class="{ cur: type == 'fived' }"
          @click="getStock('fived')"
          >5日</span
        >
        <span
          class="item fl"
          :class="{ cur: type == 'tend' }"
          @click="getStock('tend')"
          >10日</span
        >
      </div>
      <table>
        <thead>
          <tr>
            <td rowspan="2">序号</td>
            <td rowspan="2">证券代码</td>
            <td rowspan="2">证券简称</td>
            <td rowspan="2">收盘</td>
            <td rowspan="2">涨跌幅(%)</td>
            <td colspan="5">融资</td>
            <td colspan="5">融券</td>
            <td rowspan="2" v-show="type == 'one'">融资融券<br />余额(元)</td>
            <td rowspan="2" v-show="type == 'one'">
              融资融券<br />余额差值(元)
            </td>
          </tr>
          <tr>
            <td>余额<br />(元)</td>
            <td>余额占流<br />通市值比</td>
            <td>买入额<br />(元)</td>
            <td>偿还额<br />(元)</td>
            <td>净买入<br />(元)</td>
            <td>余额<br />(元)</td>
            <td>余量<br />(股)</td>
            <td>卖出量<br />(股)</td>
            <td>偿还量<br />(股)</td>
            <td>净卖出<br />(股)</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, i) in typeData" :key="item.id">
            <td>{{ i + 1 }}</td>
            <td>{{ item.scode }}</td>
            <td>{{ item.secname }}</td>
            <td :class="{ red: item[`zdfn`] > 0, green: item[`zdfn`] < 0 }">
              {{ item.spj }}
            </td>
            <td :class="{ red: item[`zdfn`] > 0, green: item[`zdfn`] < 0 }">
              {{ item[`zdfStr`] }}
            </td>
            <td>{{ item.rzye }}</td>
            <td>{{ item.rzyezb }}</td>
            <td>{{ item[`rzmren`] }}</td>
            <td>{{ item[`rzchen`] }}</td>
            <td :class="{ red: item[`rzjmen`] > 0, green: item[`rzjmen`] < 0 }">
              {{ item[`rzjmeStr`] }}
            </td>
            <td>{{ item.rqye }}</td>
            <td>{{ item.rqyl }}</td>
            <td>{{ item[`rqmcln`] }}</td>
            <td>{{ item[`rqchln`] }}</td>
            <td :class="{ red: item[`rqjmgn`] > 0, green: item[`rqjmgn`] < 0 }">
              {{ item[`rgjmgStr`] }}
            </td>
            <td v-show="type == 'one'">{{ item.rzrqye }}</td>
            <td v-show="type == 'one'">{{ item.rzrqyecz }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <p class="lookMore">
      <router-link :to="`transationPage/${market}/${type}`" class="txt"
        >查看全部数据>>
      </router-link>
    </p>
  </div>
</template>

<script>
import { getStock } from "../api/index";
import { numberFormat } from "../script/utils";
export default {
  data() {
    return {
      tableData: [],
      typeData: [],
      type: "one",
      market: "all", //all-全市场,sh-沪市,sz-深市,kcb-科创板
      endDate: "",
      keys: {
        one: [
          "id",
          "scode",
          "secname",
          "spj", //收盘价
          "zdf", //涨跌幅
          "rzye", //融资余额
          "rzyezb", //当日余额占流通市值比
          "rzmre", //融资买入额
          "rzche", //融资偿还额
          "rzjme", //融资净买入
          "rqye", //融券余额
          "rqyl", //融券余量
          "rqmcl", //融券卖出量
          "rqchl", //融券偿还量
          "rqjmg", //融券净卖出
          "rzrqye", //融资融券余额
          "rzrqyecz", //融资融券余额差值
        ],
        threed: [
          "id",
          "scode",
          "secname",
          "spj", //收盘价
          "rchange_threedcp", //涨跌幅
          "rzye", //融资余额
          "rzyezb", //当日余额占流通市值比
          "rzmre_threed", //融资买入额
          "rzche_threed", //融资偿还额
          "rzjme_threed", //融资净买入
          "rqye", //融券余额
          "rqyl", //融券余量
          "rqmcl_threed", //融券卖出量
          "rqchl_threed", //融券偿还量
          "rqjmg_threed", //融券净卖出
          "rzrqye", //融资融券余额
          "rzrqyecz", //融资融券余额差值
        ],
        fived: [
          "id",
          "scode",
          "secname",
          "spj", //收盘价
          "rchange_fivedcp", //涨跌幅
          "rzye", //融资余额
          "rzyezb", //当日余额占流通市值比
          "rzmre_fived", //融资买入额
          "rzche_fived", //融资偿还额
          "rzjme_fived", //融资净买入
          "rqye", //融券余额
          "rqyl", //融券余量
          "rqmcl_fived", //融券卖出量
          "rqchl_fived", //融券偿还量
          "rqjmg_fived", //融券净卖出
          "rzrqye", //融资融券余额
          "rzrqyecz", //融资融券余额差值
        ],
        tend: [
          "id",
          "scode",
          "secname",
          "spj", //收盘价
          "rchange_tendcp", //涨跌幅
          "rzye", //融资余额
          "rzyezb", //当日余额占流通市值比
          "rzmre_tend", //融资买入额
          "rzche_tend", //融资偿还额
          "rzjme_tend", //融资净买入
          "rqye", //融券余额
          "rqyl", //融券余量
          "rqmcl_tend", //融券卖出量
          "rqchl_tend", //融券偿还量
          "rqjmg_tend", //融券净卖出
          "rzrqye", //融资融券余额
          "rzrqyecz", //融资融券余额差值
        ],
      },
    };
  },

  components: {},

  computed: {},
  watch: {
    // type() {
    //   this.tag();
    // },
    market() {
      this.getStock(this.type);
    },
  },

  mounted() {
    this.getStock();
  },

  methods: {
    tag() {
      const arr = [];
      let k1;
      if (this.type == "one") {
        k1 = `zdf${this.type == "one" ? "" : "_" + this.type}`;
      }
      if (this.type != "one") {
        k1 = `rchange_${this.type}cp`;
      }
      const k2 = `rzmre${this.type == "one" ? "" : "_" + this.type}`;
      const k3 = `rzche${this.type == "one" ? "" : "_" + this.type}`;
      const k4 = `rzjme${this.type == "one" ? "" : "_" + this.type}`;
      const k5 = `rqmcl${this.type == "one" ? "" : "_" + this.type}`;
      const k6 = `rqchl${this.type == "one" ? "" : "_" + this.type}`;
      const k7 = `rqjmg${this.type == "one" ? "" : "_" + this.type}`;
      this.tableData.map((item, i) => {
        if (i > 9) return;
        const obj = {};
        Object.keys(item).map((k) => {
          if (this.keys[this.type].includes(k)) {
            switch (k) {
              case k1:
                obj["zdfn"] = item[k];
                obj["zdfStr"] = item[k] ? numberFormat(item[k]) + "%" : 0;
                break;
              case k2:
                obj["rzmren"] = numberFormat(item[k]);
                break;
              case k3:
                obj["rzchen"] = numberFormat(item[k]);
                break;
              case k4:
                obj["rzjmen"] = item[k];
                obj["rzjmeStr"] = numberFormat(item[k]);
                break;
              case k5:
                obj["rqmcln"] = numberFormat(item[k]);
                break;
              case k6:
                obj["rqchln"] = numberFormat(item[k]);
                break;
              case k7:
                obj["rqjmgn"] = item[k];
                obj["rgjmgStr"] = numberFormat(item[k]);
            }
            obj[k] = item[k];
            obj.spj = numberFormat(item.spj);
            obj.rzye = numberFormat(item.rzye);
            obj.rqye = numberFormat(item.rqye);
            obj.rqyl = numberFormat(item.rqyl);
            obj.rzrqye = numberFormat(item.rzrqye);
            obj.rzrqyecz = numberFormat(item.rzrqyecz);
            obj.rzyezb = item.rzyezb ? numberFormat(item.rzyezb) + "%" : 0;
          }
        });
        // if (arr.length == 10) return;
        arr.push(obj);
      });
      console.log(arr);
      this.typeData = arr;
    },
    async getStock(type = "one") {
      this.type = type;
      const field = this.keys[type][9];
      await getStock({ marketType: this.market, field }).then((back) => {
        if (back.status == 1) {
          let list = back.data.list;
          this.endDate = list[0].end_date;
          this.tableData = list;
          this.tag();
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../style/var.scss";
.border {
  border: 2px solid $border;
  border-radius: 6px;
}
.box {
  background: $bg;
  .head {
    background: $border;
    line-height: 34px;
    text-align: center;
    position: relative;
    .type {
      position: absolute;
      left: 0;
      top: 0;
      padding-left: 4px;
      padding-top: 5px;
      .item {
        height: 24px;
        line-height: 24px;
        color: #cccccc;
        font-size: 16px;
        padding: 0 8px;
        cursor: pointer;
        position: relative;
        .icon {
          position: absolute;
          display: inline-block;
          width: 27px;
          height: 15px;
          top: -2px;
          right: -14px;
          background: url($PIC_URL + "/tlbypcWeb/securities/new.png") no-repeat
            center;
        }
        &.cur {
          color: #ffffff;
          margin: 0 10px;
          background: #35497c;
          border-radius: 4px;
        }
      }
    }
    .title {
      font-size: 18px;
      color: #ff4e39;
      font-weight: 400;
    }
  }
  .tag {
    line-height: 28px;
    background: $border;
    border: 1px solid $bg;
    span {
      color: #b3b3b3;
      display: inline-block;
      font-size: 14px;
      border-right: 1px solid $bg;
      padding: 0 18px;
      &.cur {
        background: #35497c;
        color: #ffffff;
      }
      &.item {
        padding: 0 15px;
        cursor: pointer;
      }
    }
  }
  table {
    width: 100%;
    color: #bcbfc4;
    font-size: 15px;
    text-align: center;
    line-height: 20px;
    // table-layout: fixed;
    td {
      padding: 8px 0;
    }
    thead {
      background: #1c1d21;
      td {
        border: 1px solid #323337;
      }
    }
    tbody {
      td {
        border: 1px solid #25262a;
        &.red {
          color: #ea2827;
        }
        &.green {
          color: #31ed24;
        }
      }
      tr:nth-of-type(2n) {
        background: #111117;
      }
    }
  }
  .lookMore {
    text-align: right;
    line-height: 36px;
    font-size: 16px;
    color: #e6e6e6;
    margin-bottom: 4px;
    .txt {
      cursor: pointer;
      &:hover {
        color: #ff4e39;
      }
    }
  }
}
</style>
